<template>
    <div class="repositories">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470" v-if="menudatalist">
                <div class="second_show_text repositories fl-clr">
                    <div class="second-title">
                        <p class="en" v-html="menudata.alias"></p>
                        <p class="cn">寻种之路</p>
                    </div>
                    <div class="text" v-html="menudata.content">   
                    </div>
                </div>
            </div>
            <i class="tips"></i>
        </div>

        <div class="second_box">
            <img src="../assets/images/icon/repositories-r.svg" class="repositories-r">
            <div class="pages_w1470">
                <div class="repositories-top fl-clr">
                    <div class="second-title opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                        <p class="en">{{menudatalist[0].alias}}</p>
                        <p class="cn">{{menudatalist[0].name}}}</p>
                    </div>
                    <div class="text" v-html="menudatalist[0].info">
                        
                    </div>
                </div>

                <div class="swiper-repositories-show">
                    <swiper :options="swiperOption">
                        <swiper-slide v-for="(item,index) in menudatalist[0].data" :key="index" v-show="index<8"><div class="box scale"><img src="../assets/temp/cs42.jpg" style="width: 100%"></div></swiper-slide>
                        <swiper-slide><div class="box scale"><img :src="$store.state.domain+item.pic" style="width: 100%"></div></swiper-slide>
                    </swiper>
                    <div class="a swiper-prev"><i></i></div>
                    <div class="a swiper-next"><i></i></div>
                </div>
                <div class="swiper-repositories-show-text" v-html="menudatalist[0].content"></div>

                <div class="second-title opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].alias}}</p>
                    <p class="cn">{{menudatalist[1].name}}}</p>
                </div>

                <ul class="ul repositories-list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/lc-zhang.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j1_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j1_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p><span>2002</span>年,分离自锡林郭勒大草原</p>
                                    <p>自然发酵酸马奶</p>
                                    <P>是中国第一株完成全基因组测序的乳酸菌</p><br>
                                    <p>截至2020年5月，围绕该菌株</p>
                                    <p>共授权发明专利 <span>16</span> 项</p>
                                    <P>发表学术论文 <span>171</span> 篇</P>
                                    <p>其中SCI收录 <span>92</span> 篇</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/v9.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j3_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j3_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p><span>2005</span>年,分离自健康蒙古族儿童肠道</p><br>
                                    <p>截至2020年5月，围绕该菌株</p>
                                    <p>共授权发明专利 <span>20</span> 项</p>
                                    <p>发表学术论文 <span>33</span> 篇</p>
                                    <p>其中SCI收录 <span>9</span> 篇</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/p-8.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j4_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j4_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p><span>2005</span>年,分离自内蒙古巴彦淖尔市</p>
                                    <p>乌拉特中旗自然发酵酸牛乳</p><br>
                                    <p>截至2020年5月，围绕该菌株</p>
                                    <p>共授权发明专利 <span>11</span> 项</p>
                                    <p>发表学术论文 <span>62</span> 篇</p>
                                    <p>其中SCI收录 <span>35</span> 篇</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/h9.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j4_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j4_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p>2007年,分离自西藏那曲县罗马镇</p>
                                    <p>自然发酵酸牦牛乳</p><br>
                                    <p>截至2020年5月，围绕该菌株</p>
                                    <p>申请发明专利 <span>4</span> 项</p>
                                    <p>发表学术论文 <span>21</span> 篇</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/p9.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j5_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j5_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p><span>2008</span>年,分离自内蒙古巴彦淖尔市</p>
                                    <p>自然发酵酸粥</p><br>
                                    <p>截至2020年5月，围绕该菌株</p>
                                    <p>申请发明专利 <span>1</span> 项</p>
                                    <p>发表学术论文 <span>2</span> 篇</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="ul repositories-list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/m8.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j6_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j6_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p><span>2017</span>年,分离自健康妇女母乳</p><br>
                                    <p>研究表明M8对胃肠消化液具有良好的耐受性，能够以活的状态进入人体肠道。</p>
                                    <p>M8可改善高果糖长期（16周）摄入引起的高尿酸，血糖和高血压症状。</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="box">
                            <div class="title"><img src="../assets/images/title/m9.svg"></div>
                            <div class="bottom">
                                <div class="imgshow">
                                    <span class="scale"><img src="../assets/temp/j6_1.png"></span>
                                    <span class="scale"><img src="../assets/temp/j6_2.png"></span>
                                </div>
                                <div class="txt">
                                    <p><span>2017</span>年,分离自健康妇女母乳</p><br>
                                    <p>研究表明M9对胃肠消化液具有良好的耐受性，能够以活的状态进入人体肠道。</p>
                                    <p>M9可显著改善乳腺癌裸鼠代谢谱，降低乳腺癌肿瘤的大小和重量。</p>
                                </div>
                                <router-link :to="{name:'repositories_details'}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <Footer/>

    </div>
</template>


<style lang="scss">
.repositories .second_show .img{
    background:url(../assets/temp/bb3.jpg) no-repeat center center; background-size:cover
}
</style>


<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
    components: {
        Footer,Header
    },
    data () {
        return {
            swiperOption:{
                slidesPerView:2,
                spaceBetween:20,
                loop: true,
                navigation: {
                   nextEl: '.swiper-repositories-show .swiper-prev',
                   prevEl: '.swiper-repositories-show .swiper-next',
                }
            }
        }
    },
    computed: {
        
        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(3)).length>100){
                return this.$store.getters.getmenudata(3)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(3)).length>100){
                return this.$store.getters.getmenudatalist(3)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        },
    },
    mounted () {
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
    }
}
</script>
